home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Document Effects / boxing-away.izs next >
Text File  |  2005-08-31  |  10KB  |  418 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Boxing-away Script
  4. <!/TITLE>
  5.  
  6. <!BROWSER>FF1+ IE5+ Opr7+<!/BROWSER>
  7.  
  8. <!DESCRIPTION>A script that "boxes away" to reveal the document beneath as the surfer enters the page.
  9. <!/DESCRIPTION> 
  10.  
  11. <!CATEGORY>document effects<!/CATEGORY>
  12.  
  13. <!SCRIPT>
  14. <!-- START OF SCRIPT -->
  15. <!-- Step 1: Insert the following into the <head> section of your page. You can change the color of the boxes from green to another by changing all three instances of the word "green" to another color name: -->
  16. <style>
  17. <!--
  18. .intro{
  19. position:absolute;
  20. left:0;
  21. top:0;
  22. layer-background-color:green;
  23. background-color:green;
  24. border:0.1px solid green;
  25. z-index:10;
  26. }
  27. -->
  28. </style>
  29. <!--Step 2: Finally, insert the below right after the <body> tags, before anything else:-->
  30. <div id="p1" class="intro"></div>
  31. <div id="p2" class="intro"></div>
  32. <div id="p3" class="intro"></div>
  33. <div id="p4" class="intro"></div>
  34. <div id="p5" class="intro"></div>
  35. <div id="p6" class="intro"></div>
  36. <div id="p7" class="intro"></div>
  37. <div id="p8" class="intro"></div>
  38. <div id="p9" class="intro"></div>
  39. <div id="p10" class="intro"></div>
  40. <div id="p11" class="intro"></div>
  41. <div id="p12" class="intro"></div>
  42. <div id="p13" class="intro"></div>
  43. <div id="p14" class="intro"></div>
  44. <div id="p15" class="intro"></div>
  45. <div id="p16" class="intro"></div>
  46. <div id="p17" class="intro"></div>
  47. <div id="p18" class="intro"></div>
  48. <div id="p19" class="intro"></div>
  49. <div id="p20" class="intro"></div>
  50. <div id="p21" class="intro"></div>
  51. <div id="p22" class="intro"></div>
  52. <div id="p23" class="intro"></div>
  53. <div id="p24" class="intro"></div>
  54. <div id="p25" class="intro"></div>
  55.  
  56. <script>
  57.  
  58. /*
  59. Boxing-away Script- By Dynamic Drive (www.dynamicdrive.com)
  60. For full source code, 100's more free DHTML scripts, and TOS,
  61. visit http://www.dynamicdrive.com
  62. */
  63.  
  64.  
  65. var espeed=300
  66. var counter=1
  67. var temp=new Array()
  68. var temp2=new Array()
  69.  
  70. var ns4=document.layers?1:0
  71. var ie4=document.all?1:0
  72. var ns6=document.getElementById&&!document.all?1:0
  73.  
  74.  
  75. ////////Code for Netscape NS 4+////
  76. if (ns4){
  77. for (i=1;i<=25;i++){
  78. temp[i]=eval("document.p"+i+".clip")
  79. temp2[i]=eval("document.p"+i)
  80. temp[i].width=window.innerWidth/5
  81. temp[i].height=window.innerHeight/5
  82. }
  83.  
  84. for (i=1;i<=5;i++)
  85. temp2[i].left=(i-1)*temp[i].width
  86.  
  87. for (i=6;i<=10;i++){
  88. temp2[i].left=(i-6)*temp[i].width
  89. temp2[i].top=temp[i].height
  90. }
  91.  
  92. for (i=11;i<=15;i++){
  93. temp2[i].left=(i-11)*temp[i].width
  94. temp2[i].top=2*temp[i].height
  95. }
  96.  
  97. for (i=16;i<=20;i++){
  98. temp2[i].left=(i-16)*temp[i].width
  99. temp2[i].top=3*temp[i].height
  100. }
  101.  
  102. for (i=21;i<=25;i++){
  103. temp2[i].left=(i-21)*temp[i].width
  104. temp2[i].top=4*temp[i].height
  105. }
  106.  
  107. }
  108.  
  109. function erasecontainerns(){
  110. window.scrollTo(0,0)
  111. var whichcontainer=Math.round(Math.random()*25)
  112. if (whichcontainer==0)
  113. whichcontainer=1
  114. if (temp2[whichcontainer].visibility!="hide")
  115. temp2[whichcontainer].visibility="hide"
  116. else{
  117. while (temp2[whichcontainer].visibility=="hide"){
  118. whichcontainer=Math.round(Math.random()*25)
  119. if (whichcontainer==0)
  120. whichcontainer=1
  121. }
  122. temp2[whichcontainer].visibility="hide"
  123. }
  124.  
  125. if (counter==25)
  126. clearInterval(beginerase)
  127.  
  128. counter++
  129. espeed-=10
  130.  
  131. }
  132.  
  133.  
  134. ////////End code for NS 4+////////
  135.  
  136.  
  137. ///////////Code for IE 4+ and NS6/////////
  138.  
  139. if (ie4||ns6){
  140. var containerwidth=ns6?parseInt(window.innerWidth)/5-3 : parseInt(document.body.clientWidth/5)
  141. var containerheight=ns6?parseInt(window.innerHeight)/5-2 : parseInt(document.body.offsetHeight/5)
  142.  
  143. for (i=1;i<=25;i++){
  144. temp[i]=ns6?document.getElementById("p"+i).style : eval("document.all.p"+i+".style")
  145. temp[i].width=containerwidth
  146. temp[i].height=containerheight
  147. }
  148.  
  149. for (i=1;i<=5;i++)
  150. temp[i].left=(i-1)*containerwidth
  151.  
  152. for (i=6;i<=10;i++){
  153. temp[i].left=(i-6)*containerwidth
  154. temp[i].top=containerheight
  155. }
  156.  
  157. for (i=11;i<=15;i++){
  158. temp[i].left=(i-11)*containerwidth
  159. temp[i].top=2*containerheight
  160. }
  161.  
  162. for (i=16;i<=20;i++){
  163. temp[i].left=(i-16)*containerwidth
  164. temp[i].top=3*containerheight
  165. }
  166.  
  167. for (i=21;i<=25;i++){
  168. temp[i].left=(i-21)*containerwidth
  169. temp[i].top=4*containerheight
  170. }
  171. }
  172.  
  173. function erasecontainerie(){
  174. window.scrollTo(0,0)
  175. var whichcontainer=Math.round(Math.random()*25)
  176. if (whichcontainer==0)
  177. whichcontainer=1
  178. if (temp[whichcontainer].visibility!="hidden")
  179. temp[whichcontainer].visibility="hidden"
  180. else{
  181. while (temp[whichcontainer].visibility=="hidden"){
  182. whichcontainer=Math.round(Math.random()*25)
  183. if (whichcontainer==0)
  184. whichcontainer=1
  185. }
  186. temp[whichcontainer].visibility="hidden"
  187. }
  188.  
  189. if (counter==25){
  190. clearInterval(beginerase)
  191. if (ns6){
  192. for (i=1;i<26;i++)
  193. temp[i].display="none"
  194. }
  195. }
  196. counter++
  197. espeed-=10
  198.  
  199. }
  200.  
  201. /////////End IE 4+ code////////
  202.  
  203. if (ns4)
  204. beginerase=setInterval("erasecontainerns()",espeed)
  205. else if (ie4||ns6){
  206. beginerase=setInterval("erasecontainerie()",espeed)
  207. }
  208.  
  209.  
  210. </script>
  211.  
  212. <!-- END OF SCRIPT -->
  213. <!/SCRIPT>
  214.  
  215. <!PREVIEW>
  216. <!-- START OF SCRIPT -->
  217. <!-- Step 1: Insert the following into the <head> section of your page. You can change the color of the boxes from green to another by changing all three instances of the word "green" to another color name: -->
  218. <style>
  219. <!--
  220. .intro{
  221. position:absolute;
  222. left:0;
  223. top:0;
  224. layer-background-color:green;
  225. background-color:green;
  226. border:0.1px solid green;
  227. z-index:10;
  228. }
  229. -->
  230. </style>
  231. <!--Step 2: Finally, insert the below right after the <body> tags, before anything else:-->
  232. <div id="p1" class="intro"></div>
  233. <div id="p2" class="intro"></div>
  234. <div id="p3" class="intro"></div>
  235. <div id="p4" class="intro"></div>
  236. <div id="p5" class="intro"></div>
  237. <div id="p6" class="intro"></div>
  238. <div id="p7" class="intro"></div>
  239. <div id="p8" class="intro"></div>
  240. <div id="p9" class="intro"></div>
  241. <div id="p10" class="intro"></div>
  242. <div id="p11" class="intro"></div>
  243. <div id="p12" class="intro"></div>
  244. <div id="p13" class="intro"></div>
  245. <div id="p14" class="intro"></div>
  246. <div id="p15" class="intro"></div>
  247. <div id="p16" class="intro"></div>
  248. <div id="p17" class="intro"></div>
  249. <div id="p18" class="intro"></div>
  250. <div id="p19" class="intro"></div>
  251. <div id="p20" class="intro"></div>
  252. <div id="p21" class="intro"></div>
  253. <div id="p22" class="intro"></div>
  254. <div id="p23" class="intro"></div>
  255. <div id="p24" class="intro"></div>
  256. <div id="p25" class="intro"></div>
  257.  
  258. <script>
  259.  
  260. /*
  261. Boxing-away Script- By Dynamic Drive (www.dynamicdrive.com)
  262. For full source code, 100's more free DHTML scripts, and TOS,
  263. visit http://www.dynamicdrive.com
  264. */
  265.  
  266.  
  267. var espeed=300
  268. var counter=1
  269. var temp=new Array()
  270. var temp2=new Array()
  271.  
  272. var ns4=document.layers?1:0
  273. var ie4=document.all?1:0
  274. var ns6=document.getElementById&&!document.all?1:0
  275.  
  276.  
  277. ////////Code for Netscape NS 4+////
  278. if (ns4){
  279. for (i=1;i<=25;i++){
  280. temp[i]=eval("document.p"+i+".clip")
  281. temp2[i]=eval("document.p"+i)
  282. temp[i].width=window.innerWidth/5
  283. temp[i].height=window.innerHeight/5
  284. }
  285.  
  286. for (i=1;i<=5;i++)
  287. temp2[i].left=(i-1)*temp[i].width
  288.  
  289. for (i=6;i<=10;i++){
  290. temp2[i].left=(i-6)*temp[i].width
  291. temp2[i].top=temp[i].height
  292. }
  293.  
  294. for (i=11;i<=15;i++){
  295. temp2[i].left=(i-11)*temp[i].width
  296. temp2[i].top=2*temp[i].height
  297. }
  298.  
  299. for (i=16;i<=20;i++){
  300. temp2[i].left=(i-16)*temp[i].width
  301. temp2[i].top=3*temp[i].height
  302. }
  303.  
  304. for (i=21;i<=25;i++){
  305. temp2[i].left=(i-21)*temp[i].width
  306. temp2[i].top=4*temp[i].height
  307. }
  308.  
  309. }
  310.  
  311. function erasecontainerns(){
  312. window.scrollTo(0,0)
  313. var whichcontainer=Math.round(Math.random()*25)
  314. if (whichcontainer==0)
  315. whichcontainer=1
  316. if (temp2[whichcontainer].visibility!="hide")
  317. temp2[whichcontainer].visibility="hide"
  318. else{
  319. while (temp2[whichcontainer].visibility=="hide"){
  320. whichcontainer=Math.round(Math.random()*25)
  321. if (whichcontainer==0)
  322. whichcontainer=1
  323. }
  324. temp2[whichcontainer].visibility="hide"
  325. }
  326.  
  327. if (counter==25)
  328. clearInterval(beginerase)
  329.  
  330. counter++
  331. espeed-=10
  332.  
  333. }
  334.  
  335.  
  336. ////////End code for NS 4+////////
  337.  
  338.  
  339. ///////////Code for IE 4+ and NS6/////////
  340.  
  341. if (ie4||ns6){
  342. var containerwidth=ns6?parseInt(window.innerWidth)/5-3 : parseInt(document.body.clientWidth/5)
  343. var containerheight=ns6?parseInt(window.innerHeight)/5-2 : parseInt(document.body.offsetHeight/5)
  344.  
  345. for (i=1;i<=25;i++){
  346. temp[i]=ns6?document.getElementById("p"+i).style : eval("document.all.p"+i+".style")
  347. temp[i].width=containerwidth
  348. temp[i].height=containerheight
  349. }
  350.  
  351. for (i=1;i<=5;i++)
  352. temp[i].left=(i-1)*containerwidth
  353.  
  354. for (i=6;i<=10;i++){
  355. temp[i].left=(i-6)*containerwidth
  356. temp[i].top=containerheight
  357. }
  358.  
  359. for (i=11;i<=15;i++){
  360. temp[i].left=(i-11)*containerwidth
  361. temp[i].top=2*containerheight
  362. }
  363.  
  364. for (i=16;i<=20;i++){
  365. temp[i].left=(i-16)*containerwidth
  366. temp[i].top=3*containerheight
  367. }
  368.  
  369. for (i=21;i<=25;i++){
  370. temp[i].left=(i-21)*containerwidth
  371. temp[i].top=4*containerheight
  372. }
  373. }
  374.  
  375. function erasecontainerie(){
  376. window.scrollTo(0,0)
  377. var whichcontainer=Math.round(Math.random()*25)
  378. if (whichcontainer==0)
  379. whichcontainer=1
  380. if (temp[whichcontainer].visibility!="hidden")
  381. temp[whichcontainer].visibility="hidden"
  382. else{
  383. while (temp[whichcontainer].visibility=="hidden"){
  384. whichcontainer=Math.round(Math.random()*25)
  385. if (whichcontainer==0)
  386. whichcontainer=1
  387. }
  388. temp[whichcontainer].visibility="hidden"
  389. }
  390.  
  391. if (counter==25){
  392. clearInterval(beginerase)
  393. if (ns6){
  394. for (i=1;i<26;i++)
  395. temp[i].display="none"
  396. }
  397. }
  398. counter++
  399. espeed-=10
  400.  
  401. }
  402.  
  403. /////////End IE 4+ code////////
  404.  
  405. if (ns4)
  406. beginerase=setInterval("erasecontainerns()",espeed)
  407. else if (ie4||ns6){
  408. beginerase=setInterval("erasecontainerie()",espeed)
  409. }
  410.  
  411.  
  412. </script>
  413.  
  414.  
  415. <!-- END OF SCRIPT -->
  416. <!/PREVIEW>
  417.  
  418. <!RELATED>NONE<!/RELATED>